<!DOCTYPE html>
<html>
	<head>
		<meta charset="uft-8"/>
		<title></title>
		<style>
			*{margin:0;padding:0;}
			body{background:#ccc;}
			.container{
				width:780px;
				height:170px;
				border:1px solid green;
				margin:20px auto;
			}
			.box{
				float:left;
				margin-left:20px;
				border:10px solid white;
				position:relative;
			}
			.box>img{
				width:150px;
				height:150px;
				display:block;			
				/*border:5px solid white;
				margin-left:12px;*/
			}
			.txt{
				text-align:center;
				background:#898;
				position:absolute;
				bottom:0;
				width:100%;
				color:green;
				display:none;
			}
			.box:hover .txt{
			display:block;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<img src="http://img1.imgtn.bdimg.com/it/u=4122039600,2082869009&fm=26&gp=0.jpg"/>
				<div class="txt">春天</div>
			</div>
			<div class="box">
				<img src="http://img1.imgtn.bdimg.com/it/u=4122039600,2082869009&fm=26&gp=0.jpg"/>
				<div class="txt">春天</div>
			</div>
			<div class="box">
				<img src="http://img1.imgtn.bdimg.com/it/u=4122039600,2082869009&fm=26&gp=0.jpg"/>
				<div class="txt">春天</div>
			</div>
			<div class="box">
				<img src="http://img1.imgtn.bdimg.com/it/u=4122039600,2082869009&fm=26&gp=0.jpg"/>
				<div class="txt">春天</div>
			</div>
		</div>
	</body>
</html>